<template>
  <el-card>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-input v-model.trim="searchParams.name" placeholder="请输入姓名" />
      </el-col>
      <el-col :span="6">
        <el-select
          v-model.trim="searchParams.department"
          placeholder="请选择部门"
        >
          <el-option label="全部" value="" />
          <el-option label="总裁办" value="总裁办" />
          <el-option label="财务部" value="财务部" />
          <el-option label="人事部" value="人事部" />
          <el-option label="行政部" value="行政部" />
          <el-option label="市场部" value="市场部" />
          <el-option label="技术部" value="技术部" />
          <el-option label="其他" value="其他" />
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-col>
    </el-row>
  </el-card>
  <el-card class="mt">
    <el-table :data="dataList" v-loading="loading" :border="true">
      <el-table-column label="账号" type="index" width="80px">
        <template #default="scope">
          {{ scope.$index + pageInfo.pageSize * (pageInfo.page - 1) + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="账号" prop="account" />
      <el-table-column label="姓名" prop="name" />
      <el-table-column label="手机号" prop="phone" />
      <el-table-column label="身份证号" prop="idNo" />
      <el-table-column label="职位" prop="position">
        <template #default="scope">
          <el-tag type="primary">{{ scope.row.position }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="所属部门" prop="department" />
      <el-table-column label="页面权限" prop="pageAuthority">
        <template #default="scope">
          <el-tag type="success">{{ scope.row.pageAuthority }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="按钮权限" prop="btnAuthority">
        <template #default="scope">
          <el-tag type="info">{{ scope.row.btnAuthority }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="220px">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleAuth(scope.row)"
            v-permission="'admin'"
            >权限设置</el-button
          >
          <el-button type="danger" size="small">删除</el-button>
          <el-button type="warning" size="small">禁用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="mt mb fr"
      background
      v-model:current-page="pageInfo.page"
      v-model:page-size="pageInfo.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totals"
      @size-change="handleSizechange"
      @current-change="handlePageNochange"
    />
  </el-card>

  <AuthModal ref="authModalRef" 
  :currentRoleList="currentRoleList" :currentBtnAuth="currentBtnAuth" :currentAccount="currentAccount"
  @reload="loadData"
   />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useHttp } from '@/hooks/useHttp';
import AuthModal from './AuthModal.vue';
import { getUserAuthApi } from '@/api/system';

interface SearchParams {
  name: string;
  department: string;
  role: string;
}
const authModalRef = ref<InstanceType<typeof AuthModal>>();
const searchParams = ref<SearchParams>({
  name: '',
  department: '',
  role: '',
});

const handleSearch = () => {
  console.log(searchParams);
  loadData();
};

const handleReset = () => {
  searchParams.value = {
    name: '',
    department: '',
    role: '',
  };
  resetPagination();
};

const {
  dataList,
  loading,
  totals,
  pageInfo,
  loadData,
  handleSizechange,
  handlePageNochange,
  resetPagination,
} = useHttp('/permissionList', searchParams);

const currentRoleList = ref<string[]>([]);
const currentBtnAuth = ref<string[]>([]);
const currentAccount = ref<string>('');
const handleAuth = async (row: any) => {
  authModalRef.value?.setVisible();
  console.log(row);
  const res = await getUserAuthApi(row.pageAuthority);
  currentRoleList.value = flatArray(res.data.list);
  currentBtnAuth.value = res.data.btn;
  currentAccount.value = row.account;
};

const flatArray = (arr: any) => {
  const urls: any = [];
  const fn = (node: any) => {
    if (node.url && !node.children) {
      urls.push(node.url);
    }
    if (node.children) {
      node.children.forEach((item: any) => {
        fn(item);
      });
    }
  };

  arr.forEach((item: any) => {
    fn(item);
  });
  return urls;
};

onMounted(() => {});
</script>

<style scoped lang="less"></style>
